<template>
  <div class="appCenter-main">
    <template v-if="!detailFlag">
    <div class="appCenter-left">
      <p class="appCenter-title" :class="selectedItem === appTypes[index].code ? 'selectedItem' : ''" v-for="(item, index) in appTypes" :key="index" @click="itemClick(item.code)">{{item.name}}</p>
    </div>
    <div class="appCenter-right">
      <el-carousel :interval="3000" class="appCenter-carousel" arrow="never"  height='220px' :autoplay='false' indicator-position='none' trigger='click'>
        <el-carousel-item>
          <div class="carousel-item">
            <img :src="img" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
      <p class="appCenter-main-title">
        <span v-if="searchFlag" class="title-left">“<span style="color:#008BEE">{{appName}}</span>”相关搜索结果</span>
        <span v-else style="display: inline-block;line-height:32px">
        <span style="margin-right:5px">{{appTypes.find(item=>item.code == selectedItem).name}}</span>
        <el-tooltip placement="top">
          <div slot="content">角色开启该应用权限时，常用设置才会生效</div>
          <i  class="V7_iconfont V7_iconV7tubiao_bangzhu-42" style="color:#B3B9C7;font-size: 12px"></i>
        </el-tooltip>
        </span>
        <el-input placeholder="搜索应用" class='appCenter-input' @keyup.enter.native="search"  size="mini" clearable @clear='changeState' v-model.trim="appName">
          <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer;"  @click="search"></i>
        </el-input>
      </p>
      <div class="items">
        <appItem v-for="item in itemList" :key="item.id" :flag='commonlyUsedList.includes(item.id)' :obj="item" @open="toDetail(item)" @setCommonlyUsed='setCommonlyUsed(item)' @delCommonlyUsed='delCommonlyUsed(item)'></appItem>
      </div>
    </div>
    </template>
    <template v-else>
      <appDetails :show.sync='detailFlag' :data='detailData' ref="appDetails" />
    </template>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import appItem from './components/appItem.vue'
import appDetails from './components/appDetails.vue'
import { commonAction } from '@/utils/common'
import { PermissionModule } from '@/store/modules/permission'
import { CommonModule } from '@/store/modules/common'
@Component({ name: 'AppCenter', components: { appItem, appDetails } })
export default class AppCenter extends Vue {
  private $getCache: any
  private $message: any
  private $store: any
  private appName = ''
  private type = ''
  private keyWord = ''
  private searchFlag = false
  private detailFlag = false
  private appTypes = [
    { name: '全部', code: '' },
    { name: '培训学习', code: 'study' },
    { name: '智能AI', code: 'AI' },
    { name: '客服工具', code: 'kfTool' },
    { name: '其他', code: 'other' }
  ]

  private img = require('../../assets/img/1052.png')
  private roleList = [] // 权限列表
  private selectedItem = ''
  private detailData = {
    licenceList: [],
    detail: {}
  }

  private itemClick (code) {
    this.selectedItem = code
    this.appName = ''
    this.getData()
  }

  private itemList = []
  private licenceList = []
  private commonlyUsedList: string[] = [] // 常用应用列表

  private getData () {
    const url = '/base/action/application/list'
    commonAction({
      url,
      method: 'post',
      data: {
        name: this.appName,
        type: this.selectedItem,
        limit: 50,
        page: 1
      }
    }).then(res => {
      this.itemList = res.list
      if (this.appName) {
        this.searchFlag = true
      } else {
        this.searchFlag = false
      }
    })
  }

  private getLicences (id) {
    const url = `/base/action/application/licences/${id}`
    commonAction({ url, method: 'post' }).then(res => {
      if (res.success) {
        this.licenceList = res.list
        this.detailData.licenceList = res.list;
        (this.$refs.appDetails as any).getId()
      }
    })
  }

  private getCommonlyUsed () {
    this.$getCache('/base/action/general/cache/query', ['commonAppIdList'], true).then(res => {
      this.commonlyUsedList = res && res.commonAppIdList.map(item => item.id)
    })
  }

  private created () {
    this.getData()
    this.getCommonlyUsed()
  }

  private changeState () {
    this.getData()
  }

  private search () {
    this.selectedItem = ''
    this.getData()
  }

  private toDetail (val) {
    this.detailFlag = true
    this.detailData.detail = val
    this.getLicences(val.id)
  }

  private setCommonlyUsed (val) {
    this.commonlyUsedList.push(val.id)
    if (['my_call_task_list', 'my_auto_call_task_list', 'auto_call_task_list', 'preview_dialout_list'].includes(val.id)) {
      // 我的预览外呼 || 我的自动外呼 || 预览外呼管理 || 自动外呼管理  任何一个设置为常用，要把一级菜单的外呼任务加上
      const loginMenuList = this.$store.state.common.publicCache.loginMenuList || []
      if (!loginMenuList.includes('call_task')) { // 一级菜单没有外呼任务，再往里面加
        this.toCommonlyUsed('call_task', false)
        CommonModule.updateLoginMenuList({ menu: 'call_task', type: 'add' })
      }
    } else {
      this.toCommonlyUsed(val.id, false)
    }
  }

  private delCommonlyUsed (val) { // 取消常用
    this.commonlyUsedList.splice(this.commonlyUsedList.findIndex(item => item === val.id), 1)
    if (['my_call_task_list', 'my_auto_call_task_list', 'auto_call_task_list', 'preview_dialout_list'].includes(val.id)) {
      if (!(this.commonlyUsedList.includes('my_call_task_list') || this.commonlyUsedList.includes('my_auto_call_task_list') || this.commonlyUsedList.includes('auto_call_task_list') || this.commonlyUsedList.includes('preview_dialout_list'))) {
        // 我的预览外呼 || 我的自动外呼 || 预览外呼管理 || 自动外呼管理  都取消常用了，要把一级菜单的外呼任务移除
        CommonModule.updateLoginMenuList({ menu: 'call_task', type: 'delete' })
        this.toCommonlyUsed('call_task', true)
      }
    } else {
      this.toCommonlyUsed(val.id, true)
    }
  }

  private toCommonlyUsed (name, flag) { // 设置常用
    const url = '/base/action/application/set/common'
    commonAction({ url, method: 'post', data: { ids: this.commonlyUsedList } }).then(res => {
      if (res.success) {
        this.$message.success('成功')
        if (flag) {
          PermissionModule.delRoutes(name)
        } else {
          PermissionModule.addRoutes(name)
        }
        this.$getCache('/base/action/general/cache/query', ['commonAppIdList'], true)
      }
    })
  }
}
</script>
<style lang='stylus' scoped>
.appCenter-main
  // background #fff
  // box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
  // border-radius 10px
  height 100%
  display flex
  // padding 20px
.appCenter-left
  font-size 14px
  width 150px
  height 100%
  color $fc-gray2
  font-weight bold
  box-sizing border-box
  border 1px solid $border-main
  box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
  border-radius 10px
  padding-top 8px
  overflow auto
.appCenter-right
  width: calc(100vw - 254px);
  height: 100%;
  margin-left: 20px;
  overflow auto
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0;
  border-radius: 10px
  padding 16px 24px
/deep/.el-input--prefix .el-input__inner
    padding-left  30px!important
.appCenter-title
  line-height 40px
  height: 40px
  padding-left 20px
  font-size 12px
  font-weight: 400;
  color: #303753;
  position relative
  cursor pointer
.selectedItem
  height: 40px;
  background: #E5F3FD;
.selectedItem:before
  position absolute
  left 0
  width: 4px
  height: 40px
  background: #008BEE
  content: ''
.appCenter-carousel
  border-radius: 10px;
  margin-bottom 32px
/deep/.el-carousel__button
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  border-radius: 50%;
/deep/.el-carousel__indicator.is-active button
  width: 20px;
  height: 6px;
  background: #FFFFFF;
  border-radius: 3px;
.appCenter-input
  width auto
.appCenter-main-title
  display flex
  justify-content space-between
.items
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 334px);
  grid-gap: 10px;
.title-left
  display inline-block
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #303753;
.carousel-item
  width 100%
  height 100%
  img
    width: 100%;
    height: 100%;
    object-fit:cover;
</style>
